<template>
  <div v-loading="loading" class="tree-list">
    <template v-if="!comId">
      <div>请先选择公司...</div>
    </template>
    <template v-else-if="!folders">
      <div>厂站列表加载失败, 请稍后再试!</div>
    </template>
    <template v-else>
      <div v-if="showSearch" class="search">
        <el-select
          v-model="stationId"
          placeholder="搜索"
          size="small"
          class="item"
          filterable
          clearable
        >
          <el-option v-for="f in folders" :key="f.pkid" :value="f.pkid" :label="f.name"></el-option>
        </el-select>
        <!-- <el-input
          v-model="searchName"
          placeholder="输入名称搜索"
          suffix-icon="el-icon-search"
          size="small"
          @change="searchHandler"
        ></el-input>-->
      </div>
      <template v-if="rets && rets.length === 0">
        <div style="line-height: 2;">列表为空...</div>
      </template>
      <c-file
        v-else
        :folders="rets"
        :select-path="selectPath"
        :show-level="showLevel"
        value="pkid"
        name="name"
        @file-select="fileSelect"
        @folder-select="folderSelect"
      ></c-file>
    </template>
  </div>
</template>

<script>
import CFile from "@/components/CFile";
// import { debounce } from "lodash";
export default {
  name: "TreeList",
  components: {
    CFile
  },
  props: {
    path: {
      type: Array,
      default() {
        return [];
      }
    },
    showLevel: {
      type: Number,
      default: 3
    },
    showSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      searchName: "",
      stationId: null,
      folders: null,
      selectPath: null,
      filters: null
    };
  },
  computed: {
    rets() {
      if (!this.stationId) {
        return this.folders;
      }
      return (
        this.folders &&
        this.folders.filter(f => {
          if (f.pkid === this.stationId) {
            this.$set(f, "isOpen", true);
            return true;
          } else return false;
        })
      );
    },
    comId() {
      return this.$store.getters.comId;
    }
  },
  watch: {
    path: {
      handler(v) {
        this.selectPath = v;
      },
      immediate: true
    }
  },
  created() {
    if (this.comId) {
      this.loading = true;
      this._getTree().then(() => {
        this.loading = false;
      });
    }
  },
  methods: {
    _getTree() {
      return this.$axios
        .get("/svg/device/tree/" + this.comId)
        .then(res => {
          if (res.code === 1) {
            this.folders = res.data && res.data.children;
          } else {
            throw res.msg;
          }
        })
        .catch(e => {
          // this.$message.error(e);
        });
    },
    folderSelect: function(path) {
      // this.selectPath = path;
      this.$emit("folder-select", path);
    },
    fileSelect: function(path) {
      this.selectPath = path;
      this.$emit("file-select", path);
    },
    searchHandler(v) {
      this.folders = this.searchData(v);
    },
    searchData(sn) {
      return this.folders.children.filter(e => {
        if (e.name.indexOf(sn) > -1) {
          return true;
        } else {
          return e.children && this.searchData(e.children);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-list {
  position: absolute;
  width: 275px;
  height: 100%;
  overflow-y: auto;
  background: #222c3c;
  box-sizing: border-box;
  padding: 16px;
  color: #7c8ca5;
}
.search {
  background: #27354e;
  padding: 10px;
  margin: -16px;
  margin-bottom: 0;
  // .item {
  //   margin-bottom: 20px;
  // }
}
>>> .el-input {
  .el-input__inner {
    background: #222c3c;
    border: 0;
  }
}
</style>
